<template>
    <div>
        <el-table :data="historyList" stripe style="width:100%">
            <el-table-column prop="billcode" label="订单号" width="180"></el-table-column>
            <el-table-column prop="tid" label="桌号" width="120" class="table"></el-table-column>
            <el-table-column prop="total" label="订单金额(元)" width="120"></el-table-column>
            <el-table-column label="创建时间" width="240">
                <template slot-scope="scope">
                    {{fomater(scope.row.created)}}
                </template>
            </el-table-column>
            <el-table-column label="结算时间" width="240">
                <template slot-scope="scope">
                    {{fomater(scope.row.finish_time)}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-dropdown>
                        <span class="el-dropdown-link">餐品清单<i class="el-icon-arrow-down el-icon--right"></i></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item in scope.row.dish" :key="item.id">{{item.name}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { getUncompleteOrder } from "@/api/order"
import { formatDate } from "@/utils/dateformat"

export default {
  data(){
      return {
          historyList:[]
      }
  },
  created(){
      this.getData()
  },
  methods:{
      getData(){
          getUncompleteOrder({status:1}).then(res => {
              this.historyList = res.data.info
          }).catch(err => {

          })
      },
      detail(scope){
          console.log(scope.row)
      },
      fomater(date){
          return formatDate(date)
      }
  }
}
</script>
<style>
.table{
    color: blue;
}
</style>
